<template>
	<div>
		<div class="page-title" style="width: 100%">年度检查表管理</div>
		<div class="page-content">
			<el-form label-width="130px" :inline="true" :model="filterQuery">
				<el-form-item lable="选择公司:">
					<treeselect :multiple="false" placeholder="请选择公司单位" style="width: 200px" :options="companyList" v-model="filterQuery.companyId"></treeselect>
				</el-form-item>
				<el-form-item label="选择年份：">
					<el-date-picker type="year" placeholder="选择年份" style="width:200px" v-model="filterQuery.year">
					</el-date-picker>
				</el-form-item>
				&nbsp;&nbsp;&nbsp;
				<el-form-item>
					<el-button type="primary" icon='el-icon-search' @click="handleSelect">查询</el-button>
					<el-button type="primary" icon='el-icon-plus' @click="insertCheckListDialog=true">新增</el-button>
				</el-form-item>
			</el-form>
			<!--highlight-current-row @current-change="dialogVisible =true"-->
			<el-row style="padding:10px; border-top: 2px dashed #dddddd;text-align:center">
				<el-table :data="selected" style="width: 100%" max-height="560" @cell-click="handlChosen" border v-loading="loading">
					<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
					<el-table-column prop="companyCode" label="单位编号" width="165" align="center"></el-table-column>
					<el-table-column prop="companyName" label="单位名称" width="220" align="center"></el-table-column>
					<el-table-column prop="year" label="年度" width="120" align="center"></el-table-column>
					<el-table-column prop="elementTableName" label="检查表名称" width="300" align="center"></el-table-column>
					<el-table-column prop="status" label="状态" width="80" align="center"></el-table-column>
					<el-table-column label="操作" width="270" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="publishTable(scope.row)">发布</el-button>
							<!--
							<el-button type="primary" size="mini" @click="archived(scope.row)">归档</el-button>
							-->
							
							<el-button type="danger" size="mini" @click="deleteTable(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog class="page-title" title="新增年度检查表" :visible.sync="insertCheckListDialog" align="left" width="30%"
				 max-height="">
					<div class="page-content">
						<el-form :inline="true">
							<el-form-item label="选择公司:">
								<treeselect :multiple="false" placeholder="请选择公司单位" style="width: 200px" :options="companyList" v-model="filterQuery.insertCompanyCode"></treeselect>
							</el-form-item>
							<el-form-item label="选择年份:">
								<el-date-picker type="year" placeholder="选择年份" style="width:200px" v-model="filterQuery.insertYear">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="检查表名称:">
								<el-input placeholder="请输入检查表名称" style="width:200px;" v-model="filterQuery.insertelementTableName"></el-input>
							</el-form-item>
							<br />
							<el-form-item>
								<el-button type="primary" icon="el-icon-plus" @click="insertCheckList()">新增</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-dialog>
				<el-dialog class="page-title" title="年度检查表明细" :visible.sync="annCheckListDialog" width="70%" align="left" v-loading="checklistLoading">
					<div class="page-content">
						<el-row>
							<el-form :inline="true">
								<el-form-item label="单位:"></el-form-item>
								<el-form-item>
									<el-input v-model="filterQuery.chosenCompany" readonly="true"></el-input>
								</el-form-item>
								&nbsp;
								<el-form-item label="年度:"></el-form-item>
								<el-form-item>
									<el-input v-model="filterQuery.chosenYear" readonly="true"></el-input>
								</el-form-item>
								&nbsp;
								<el-button type="primary" icon="el-icon-folder" @click="addQHSEYearElement">保存</el-button>
							</el-form>
						</el-row>
						<el-row style="padding:10px; border-top: 2px dashed #dddddd;">
							<el-tree ref="elementTree" props="annCheckList" show-checkbox="true" @check-change="handleGetTreeNode" :data="filterQuery.elementTree"
							 style="width: 70%;">
							</el-tree>
						</el-row>
					</div>
				</el-dialog>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		GetCompany,
		GetQhseChildElement,
		GetQhseTable,
		insertQhseTable,
		deleteQhseTable,
		addQHSEYearElement,
		publishTableElement
	} from "../../../services/gettreedata"
	const DefaultQuery = {
		companyId: null,
		companyName:'',
		year: '',
		chosenCompany: null,
		chosenYear: '',
		insertCompanyCode: null,
		insertCompanyName: '',
		insertCompanyId: '',
		insertYear: '',
		insertelementTableName: '',
		insertStatus: '未发布',
		elementTree: []
	}
	export default {
		data() {
			return {
				filterQuery: {},
				companyList: [],
				loading:false,
				addData: {
					
					companyName: '',
					companyCode: '',
					year: '',
					elementTableName: '',
					status: ''
				},
				treeNodeList: [],
				//从后端得到的列表数据应当存入tableData，再经过筛选后在前端呈现出筛选后的selected
				selected: [],
				tableData: [],
				insertCheckListDialog: false,
				annCheckListDialog: false,
				isPublish: '',
				chosenConlumn: {
					qhse_CompanyYearManagerSysElementTable_ID: '',
					companyCode: '',
					conpanyName: '',
					year: ''
				}
			}
		},
		methods: {
			//加载初始数据
			loadParams() {
				this.loading=true
				this.filterQuery = { ...DefaultQuery,
					...this.$route.query
				};
				this.filterQuery = {
					...this.filterQuery
				};
				this.selected
				GetQhseTable().then(res => {
					this.tableData = res.data
				})
				this.loading=false
			},
			//加载选择公司的树形列表
			handleGetCompany() {
				GetCompany().then(res => {
					this.companyList=res.data
					console.log(this.companyList)
					//this.companyList = JSON.parse(JSON.stringify(res.data))
				}).catch(err => {
					this.$message.error(err.message)
				})
			},
			
			//实现查询按钮，根据公司名和年度查询对应记录
			handleSelect() {
				console.log(this.tableData)
				//获取到年度的yyyy格式数据
				if (this.filterQuery.year) {
					var data = new Date(this.filterQuery.year).getFullYear()
				}
				//当两个选择框为空，返回所有数据
				if (!data && !this.filterQuery.companyId) {
					this.selected = this.tableData
				} else {
					//当只有年度信息时所做查询
					if (data && !this.filterQuery.companyId) {
						this.selected = this.tableData.filter(item => {
							return item.year == data
						})
						//当只有公司信息时所做查询
					} else if (!data && this.filterQuery.companyId) {
						this.changeCompanyIdTocompanyName(this.companyList, this.filterQuery.companyId)
						this.selected = this.tableData.filter(item => {
							return item.companyName == this.filterQuery.companyName
						})
						//当有年度信息和公司信息时所做查询
					} else if (data && this.filterQuery.companyId) {
						this.changeCompanyIdTocompanyName(this.companyList, this.filterQuery.companyId)
						this.selected = this.tableData.filter(item => {
							return (item.year == data && item.companyName == this.filterQuery.companyName)
						})
					}
				}
			},
			//将从filterQuery.companyCode获取的公司id转换为公司名称，递归实现
			changeCompanyIdTocompanyName(val,companyId) {
				for (var j = 0; j < val.length; j++) {
					if (val[j]) {
						if (val[j].id==companyId) {
							this.filterQuery.companyName = val[j].label
							break
						} else if (val[j].children) {
							this.changeCompanyIdTocompanyName(val[j].children, companyId)
						}
					}
				}
			},
			//点击列表中的某一列加载勾选要素表一二级节点
			handlChosen(val, column) {
				//如果鼠标点击到的是操作框，则不打开要素节点框，因为操作里有三个按钮，会影响到使用
				if (column.label != "操作") {
					this.handleGetQhseChildElement()
					console.log(val)
					this.chosenConlumn.companyCode = val.companyCode
					this.chosenConlumn.conpanyName = val.companyName
					this.chosenConlumn.year = val.year
					this.chosenConlumn.qhse_CompanyYearManagerSysElementTable_ID = val.qhse_CompanyYearManagerSysElementTable_ID
					
					//将选中行数据的公司名和年度显示
					this.filterQuery.chosenCompany = String(val.companyName);
					this.filterQuery.chosenYear = String(val.year)
					//初始化要素表子节点选择数组，并将所选记录的id装入该数组
					this.treeNodeList = []
					var ss = []
					ss.treeNodeId = val.id
					ss.checked = true
					/*
					 *spice(val1,val2,data[])方法为向数组添加或删除某一个元素，val1为操作位置，必需；val2为操作元素个数，如果为0则不删除元素，必需；
					 * data[]为添加的元素，非必需。当第三个参数为空时表示从val1位置开始删除val2个元素；当第三个元素不为空时，如果val2为0，则表示
					 * 向val1位置添加data[]，若val2不为0，则表示从val1位置开始将val2个元素替换为data[]
					 */
					this.annCheckListDialog = true
				}
			},
			//加载要素表的一二级节点
			handleGetQhseChildElement() {
				//从后端接口中获取对应的要素表的树，并构建出符合el-tree的数据组

				GetQhseChildElement().then(res => {
					this.creatTree(res.data, this.filterQuery.elementTree)
				}).catch(err => {
					this.$message.error(err.message)
				})
				
			},
			//构建要素表一二级节点树，由于el-tree所能显示的数据类型为{label:'',children:[]}，
			//而从接口中返回的数据类型为data，所以需要对数据进行转换，使得能够呈现
			creatTree(val, elementData) {
				for (var i = 0; i < val.length; i++) {
					if (val[i].name) {
						elementData[i] = {
							code: val[i].code,
							label: val[i].name,
							children: [],
							disabled: false
						}
					}
					if (val[i].childNode.length > 0) {
						this.creatTree(val[i].childNode, elementData[i].children)
					}
				}
			},

			//根据新增框中选择的公司名称得到公司id，名称，递归实现
			bindIdToName(val, companyId) {
				//根据传入的公司列表和公司id将id装换为对应的公司名称，并同时获得公司编号
				for (var j = 0; j < val.length; j++) {
					if (val[j]) {
						if (val[j].id == companyId) {
							this.filterQuery.insertCompanyName = val[j].label;
							this.filterQuery.insertCompanyId = val[j].nodeCode;
							break;
						} else if (val[j].children) {
							this.bindIdToName(val[j].children, companyId);
						}
					}
				}
			},
			//实现新增框的新增一列数据
			insertCheckList() {
				//关闭新增记录框
				this.insertCheckListDialog = false
				//调用转换方法，将选中的公司id转换为公司名称
				this.bindIdToName(this.companyList, this.filterQuery.insertCompanyCode)
				//将新增记录框中的数据添加到准备好的数组中，组装出一条tabledate的数据，并将该数据添加到tabledate中
				this.addData.companyName = this.filterQuery.insertCompanyName
				this.addData.companyCode = this.filterQuery.insertCompanyId
				this.addData.year = this.filterQuery.insertYear.getFullYear().toString()
				this.addData.elementTableName = this.filterQuery.insertelementTableName
				this.addData.status = this.filterQuery.insertStatus
				console.log(this.addData)
				//this.tableData.push(this.addData)
				//调用接口将新增的记录返回后端，并重新渲染tabledata
				insertQhseTable(this.addData).then(res => {
					if (res.code == '1000') {
						this.$message({
							message: "添加成功",
							type: "success"
						})
						this.loadParams()
					} else {
						this.$message.error('添加失败')
					}
				}).catch(err => {
					this.$message.error(err.message)
				})
			},
			//获取点击checkbox时得到的节点，data为数组，checked(true:选中状态,false:撤销选中)
			handleGetTreeNode(data, checked) {
				//构建一个空数组，并将获得的数据组装到数组中
				var ss = []
				ss.code = data.code
				ss.checked = checked
				//将组装好的数据加入到准备好的一个选中与撤销的数组中
				this.treeNodeList.push(ss)
			},
			//年度检查表要素表一二级节点选中保存后并返回数据给后端
			addQHSEYearElement() {
				//将选中的该行记录一并放入数组中
				//关闭年度检查表明细框
				this.annCheckListDialog = false
				//从后往前删除选中与撤销数组中的多余元素
				for (var i = this.treeNodeList.length - 1; i >= 0; i--) {
					//找到第一个撤销了的元素，记录下该记录id，删除该元素，然后往前寻找对应该id的第一个元素，并将其删除
					if (!(this.treeNodeList[i].checked)) {
						let id = this.treeNodeList[i].code
						//删除false
						this.treeNodeList.splice(i, 1)
						for (var j = i - 1; j >= 0; j--) {
							if (this.treeNodeList[j].code == id) {
								this.treeNodeList.splice(j, 1)
								break
							}
						}
					}
				}
				for (j = 0; j < this.treeNodeList.length; j++) {
					for (var k = 0; k < this.filterQuery.elementTree.length; k++) {
						if (this.filterQuery.elementTree[k].code == this.treeNodeList[j].code) {
							this.treeNodeList.splice(j, 1);
							break;
						}
					}
				}
				var addQhseElementData = []
				for (i = 0; i < this.treeNodeList.length; i++) {
					if (!addQhseElementData.codes)
						addQhseElementData.codes = this.treeNodeList[i].code
					else {
						addQhseElementData.codes = addQhseElementData.codes + ";" + this.treeNodeList[i].code
					}
				}
				addQhseElementData.qhse_CompanyYearManagerSysElementTable_ID = this.chosenConlumn.qhse_CompanyYearManagerSysElementTable_ID
				addQhseElementData.companyCode = this.chosenConlumn.companyCode
				addQhseElementData.companyName = this.chosenConlumn.conpanyName
				addQhseElementData.year = this.chosenConlumn.year
				console.log(addQhseElementData)
				//调用接口向后端返回更新了的年度检查表要素表
				addQHSEYearElement(addQhseElementData).then(res => {
					if (res.code == '1000') {
						this.$message({
							message: '保存成功',
							type: 'success'
						})
					} else {
						this.$message.error('保存失败')
					}
				}).catch(err => {
					this.$message.error(err.message)
				})
			},
			//发布一列数据
			publishTable(val) {
				this.$confirm('确认发布本条记录吗', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					publishTableElement(val.qhse_CompanyYearManagerSysElementTable_ID).then(res => {
						if (res.code == '1000') {
							this.$message({
								message: '发布成功',
								type: 'success'
							})
							this.tableData.filter(item => {
								if (item == val) {
									item.status = '已发布'
									this.isPublish = 0
									//还有逻辑操作
								}
							})
						} else {
							this.$message.error('发布失败')
						}
					}).catch(err => {
						this.$message.error(err.message)
					})
				})
			},
			//归档一条数据
			archived(val) {
				this.$confirm('确认归档本条记录吗', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableData.filter(item => {
						if (item == val) {
							item.status = '已归档'
							this.isPublish = 0
							//还有逻辑操作
						}
					})
				})
			},
			//删除一列数据，通过slot获取到一行的数据，从而可以得到id删除该行数据
			deleteTable(val) {
				this.$confirm('确认删除本条记录吗', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: "warning"
				}).then(() => {
					deleteQhseTable(val.qhse_CompanyYearManagerSysElementTable_ID.toString()).then(res => {
						if (res.code == '1000') {
							this.$message({
								message: '删除成功',
								type: 'success'
							})
							this.loading=true
							this.loadParams()
							this.loading=false
						} else {
							this.$message.error('删除失败')
						}
					}).catch(err => {
						this.$message.error(err.message)
					})
				})
			}
		},
		mounted() {
				this.loadParams()
				this.handleGetCompany()
				this.handleGetQhseChildElement()
			}
	}
</script>
<style>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		padding-right: 8px;
	}
</style>
